<template>
  <div class="outer">
    <h1>加入购物车的半场动画</h1>
    <button @click="isShow = !isShow">加入购物车</button>
    <transition
      name="one"
      @before-enter="oneBeforeEnter"
      @enter="oneEnter"
      @after-enter="oneAfterEnter"
    >
      <div class="text" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "AddCart",
  data() {
    return {
      isShow: false,
    };
  },

  methods: {
    //动画钩子函数接受一个el作为参数,代表的是当前的dom元素
    oneBeforeEnter(el) {
      console.log("oneBeforeEnter");
      //在开始动画的时候 都是初始位置为0
      el.style.transform = "translate(0,0)";
    },

    //oneEnter接受第二个参数,是oneAfterEnter这个钩子
    oneEnter(el, done) {
      el.offsetLeft;
      //当开始执行动画的时候,我们设置他的终点位置和过渡效果
      el.style.transform = "translate(340px,300px)";
      el.style.transition = "all 1s linear";
      console.log("oneEnter");

      //提前执行oneAfterEnter钩子
      done();
    },

    //默认是动画执行完成才执行
    oneAfterEnter() {
      console.log("oneAfterEnter");
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
.text {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
.outer {
  height: 500px;
  width: 400px;
  border: 1px solid #000;
}
</style>